<script setup>
import { getContentbased } from "@/apis/home";
import { ref, onMounted, computed, watch } from "vue";
import { useRoute } from "vue-router";

const props = defineProps({
  hotType: {
    type: Number,
    default: 1,
  },
  id: {
    type: [Number, String],
    default: "",
  },
});
const TITLEMAP = {
  1: "相似商品推荐",
};
const title = computed(() => TITLEMAP[props.hotType]);
const route = useRoute();
const hotGoodsData = ref({});
const getHotGoodsData = async () => {
  if (props.id) {
    let res = await getContentbased(props.id);
    hotGoodsData.value = res.products;
  }
  console.log("hotGoodsData.value: ", hotGoodsData.value);
};

watch(
  () => route.params.id,
  (newVal) => {
    if (newVal) {
      getHotGoodsData();
    }
  },
  { immediate: true }
);

onMounted(() => getHotGoodsData());
</script>

<template>
  <div class="goods-hot">
    <h3>{{ title }}</h3>
    <!-- 商品区块 -->
    <div class="goods-list">
      <RouterLink
          v-for="item in hotGoodsData"
          :key="item.id"
          :to="`/detail/${item.productId}`"
          class="goods-item"
      >
        <img :src="item.imageUrl" alt="" />
        <p class="name ellipsis">{{ item.name }}</p>
        <p class="desc ellipsis">{{ item.categories }}</p>
        <p class="price">{{ item.tags }}</p>
      </RouterLink>
    </div>
  </div>
</template>
<style scoped>
.goods-hot {
  padding: 20px;
}

.name,
.desc,
.price {
  /* 共享的样式 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


.goods-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.goods-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.goods-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}

.name {
  font-weight: bold;
  margin: 8px 0 4px;
}

.desc,
.price {
  color: #666;
  font-size: 14px;
}
</style>
